<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="550" height="450"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Draw components and wires ---

        // Battery and left wire
        const batX = 100;
        const batTopY = 150;
        const batBottomY = 250;
        // Wires to battery
        ctx.beginPath();
        ctx.moveTo(batX, 50);
        ctx.lineTo(batX, batTopY);
        ctx.moveTo(batX, batBottomY);
        ctx.lineTo(batX, 380);
        ctx.stroke();
        // Battery symbol
        ctx.beginPath();
        ctx.moveTo(batX - 25, batTopY); // Top long plate (+)
        ctx.lineTo(batX + 25, batTopY);
        ctx.moveTo(batX - 15, batTopY + 25); // Short plate
        ctx.lineTo(batX + 15, batTopY + 25);
        ctx.moveTo(batX - 25, batBottomY - 25); // Long plate
        ctx.lineTo(batX + 25, batBottomY - 25);
        ctx.moveTo(batX - 15, batBottomY); // Bottom short plate (-)
        ctx.lineTo(batX + 15, batBottomY);
        ctx.stroke();
        // Dashed line in battery
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(batX, batTopY + 25);
        ctx.lineTo(batX, batBottomY - 25);
        ctx.stroke();
        ctx.setLineDash([]); // Reset line dash
        // Battery Label
        ctx.fillText("9.0 V", batX - 50, (batTopY + batBottomY) / 2);

        // Top and bottom main wires
        ctx.beginPath();
        ctx.moveTo(batX, 50); // Top wire
        ctx.lineTo(250, 50);
        ctx.moveTo(batX, 380); // Bottom wire
        ctx.lineTo(500, 380);
        ctx.stroke();
        
        // Junction points on bottom wire
        ctx.beginPath();
        ctx.arc(250, 380, 3.5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(400, 380, 3.5, 0, 2 * Math.PI);
        ctx.fill();

        // Capacitor Q
        const qX = 250;
        const qTopY = 80;
        const qGap = 20;
        ctx.beginPath();
        ctx.moveTo(qX, 50);
        ctx.lineTo(qX, qTopY);
        ctx.moveTo(qX - 30, qTopY); // Top plate
        ctx.lineTo(qX + 30, qTopY);
        ctx.moveTo(qX - 30, qTopY + qGap); // Bottom plate
        ctx.lineTo(qX + 30, qTopY + qGap);
        ctx.stroke();
        // Labels for Q
        ctx.fillText("Q", qX, qTopY - 25);
        ctx.fillText("C", qX + 10, qTopY + qGap + 15);

        // Capacitor P
        const pX = 250;
        const pTopY = 300;
        const pGap = 20;
        ctx.beginPath();
        ctx.moveTo(pX, pTopY - pGap);
        ctx.lineTo(pX, pTopY);
        ctx.moveTo(pX - 30, pTopY); // Top plate
        ctx.lineTo(pX + 30, pTopY);
        ctx.moveTo(pX - 30, pTopY + pGap); // Bottom plate
        ctx.lineTo(pX + 30, pTopY + pGap);
        ctx.moveTo(pX, pTopY + pGap);
        ctx.lineTo(pX, 380); // Connect to bottom wire
        ctx.stroke();
        // Labels for P
        ctx.fillText("P", pX, pTopY - 15);
        ctx.fillText("C", pX + 10, pTopY + pGap + 15);

        // Junction between Q and P
        const juncX = 250;
        const juncY = 150;
        ctx.beginPath();
        ctx.moveTo(qX, qTopY + qGap);
        ctx.lineTo(juncX, juncY);
        ctx.lineTo(pX, pTopY - pGap);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(juncX, juncY, 3.5, 0, 2 * Math.PI);
        ctx.fill();

        // Wire to switch
        const switchPivotX = 350;
        ctx.beginPath();
        ctx.moveTo(juncX, juncY);
        ctx.lineTo(switchPivotX, juncY);
        ctx.stroke();

        // Switch S
        const switchContactXx = 370;
        const switchContactXy = 190;
        const switchContactYx = 420;
        const switchContactYy = 150;
        // Pivot point
        ctx.beginPath();
        ctx.arc(switchPivotX, juncY, 4, 0, 2 * Math.PI);
        ctx.fill();
        // Contacts
        ctx.beginPath();
        ctx.arc(switchContactXx, switchContactXy, 4, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(switchContactYx, switchContactYy, 4, 0, 2 * Math.PI);
        ctx.stroke();
        // Switch arm (connected to X)
        ctx.beginPath();
        ctx.moveTo(switchPivotX, juncY);
        ctx.lineTo(switchContactXx, switchContactXy);
        ctx.stroke();
        // Labels for Switch
        ctx.fillText("switch S", 420, 125);
        ctx.fillText("X", switchContactXx - 18, switchContactXy + 5);
        ctx.fillText("Y", switchContactYx + 18, switchContactYy);

        // Capacitor T branch
        const tX = 400;
        const tTopY = 270;
        const tGap = 20;
        // Wire from switch contact X
        ctx.beginPath();
        ctx.moveTo(switchContactXx, switchContactXy);
        ctx.lineTo(tX, switchContactXy);
        ctx.lineTo(tX, tTopY);
        ctx.stroke();
        // Capacitor T
        ctx.beginPath();
        ctx.moveTo(tX - 30, tTopY); // Top plate
        ctx.lineTo(tX + 30, tTopY);
        ctx.moveTo(tX - 30, tTopY + tGap); // Bottom plate
        ctx.lineTo(tX + 30, tTopY + tGap);
        ctx.moveTo(tX, tTopY + tGap);
        ctx.lineTo(tX, 380); // Connect to bottom wire
        ctx.stroke();
        // Labels for T
        ctx.fillText("T", tX, tTopY - 15);
        ctx.fillText("C", tX, tTopY + tGap + 15);

        // Resistor R branch
        const rX = 480;
        const rTopY = 220;
        const rHeight = 50;
        // Wire from switch contact Y
        ctx.beginPath();
        ctx.moveTo(switchContactYx, switchContactYy);
        ctx.lineTo(rX, switchContactYy);
        ctx.lineTo(rX, rTopY);
        ctx.moveTo(rX, rTopY + rHeight);
        ctx.lineTo(rX, 380); // Connect to bottom wire
        ctx.stroke();
        // Resistor R symbol
        ctx.strokeRect(rX - 20, rTopY, 40, rHeight);
        // Label for R
        ctx.fillText("R", rX + 35, rTopY + rHeight / 2);

        // Figure Label
        ctx.font = 'bold 20px Arial';
        ctx.fillText("Fig. 6.1", 300, 420);

    </script>
</body>
</html>